<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>嗨扑米客服主页</title>
    	
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<link rel="icon" href="images/haipumi.ico"/> 
	<meta http-equiv="expires" content="0">    
	<!-- 主题有关的样式列表 -->
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/ui-pepper-grinder/easyui.css">
	<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
	<!-- jquery 和   easyui  的主要组件 -->
	<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>  
	<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.edatagrid.js"></script>
	
	<script src="js/CustomerService.js"></script>
	<style>
	.back_headinfo_logo{
		width:30%;
		height:60px;
		background:url("images/yhj_20150901105929.png") no-repeat;
		background-size:contain;
		position:absolute;
		left:50px;
		top:30px;
		z-index:9;
	}
	.back_headinfo_cominfo{
		width:100%;
		height:100%;
		background:url(images/QQ20151028210840.png);
		position:absolute;
		z-index:8;
	}
	.back_headinfo_userinfo{
		position:absolute;
		right:50px;
		top:5px;	
		width:250px;
		height:110px;
		z-index:9;
	}
	.back_headinfo_userinfo_info{
		position:absolute;
		bottom:60px;	
		font-size:13px;
	}
	.back_headinfo_userinfo_info_logout{
		position:absolute;
		bottom:15px;
		right:120px;
	}
	.back_headinfo_userinfo_info_logout:hover{
		cursor:pointer;
		color:red;
		text-decoration: underline;
	}
	.back_headinfo_userinfo_img{
		border: 1px solid pink;
		border-radius:50px;
		width:100px;
		height:100px;
		position:absolute;
		right:0px;
		background:#FFC1C1;
	}
	#center_tabs p{
		text-indent:20px;
	}
	.accordion-body p,h2,h3{
		padding-left:20px;
	}
	</style>
	<script>
		$(function(){//头像动画效果
		    $(".back_headinfo_userinfo_img").mouseover(function(){
		    	$("#back_headinfo_userinfo_img_black").fadeIn("normal");
		    	setTimeout('$("#back_headinfo_userinfo_img_black").fadeOut("normal")',2500);
		    });
		});
		var timeout=3;
		function logout(){//登出操作
			$.ajax({
				type:"POST",
				url:"customerService.action?op=backlogout",
				dataType:"JSON",
				success:function(data){
					if(data.code==1){//正常登出
						setTimeout('location.href=\'BackadminLogin.jsp\'',1000*timeout);
					}else if(data.code==0){//修改状态失败
						showinfobox(2,"","登出失败，请联系管理员处理");
					}else if(data.code==2){//session中数据过时失效
						showinfobox(2,"",data.code.msg);
						setTimeout('location.href=\'BackadminLogin.jsp\'',1000*timeout);
					}
				}
			});
		}
		//消息显示框
		function showinfobox(flag,image,string){
			if(flag==1){
				if(image!=""){
					
				}
				$("#infomessage").stop(true,true);
				$("#infomessage p").html(string);
				$("#infomessage").slideDown('narmal').delay(3000).slideUp('fast');
			}
		}
	</script>
  </head>
  
<body>
    
    
<div id="cc" class="easyui-layout" style="width:100%;height:630px;">
    <div class="back_headinfo" data-options="region:'north',split:true,collapsible:false" style="height:120px;">
    <!-- 头部信息：公司logo    公司口号       登录人信息-->
    	<div class="back_headinfo_logo" >
    		
    	</div>
    	<font style="position:absolute;z-index:9;font-size:18px;color:#fff;top:50px;left:200px;">&copy;right</font>
        <div class="back_headinfo_cominfo">
    		
    	</div>
        <div class="back_headinfo_userinfo">
        	<label class="back_headinfo_userinfo_info" style="font-size:15px;">欢迎您，<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${customerServicesession.cnickname }</label>
        	<label class="back_headinfo_userinfo_info_logout" onClick="logout()">安全登出</label>
    		<div class="back_headinfo_userinfo_img" style="overflow:hidden;">
    			<div id="back_headinfo_userinfo_img_black" cid="${customerServicesession.cid}" style="display:none;width:100px;height:100px;background:rgba(0,0,0,.5);position:absolute;z-index:6;">
    				<h3 style="color:#fff;position:absolute;top:25px;left:20px;">用户信息</h3>
    			</div>
    			<center>
    				<img src="images/yhj_10007.png" width="100" height="100" style="position:relative;z-index:5;"/>
    			</center>
    		</div>
    	</div>
    </div>
   
    <div data-options="region:'east',title:'工具栏',split:true," style="width:200px;">
    	<div id="toolbars" class="easyui-layout" data-options="fit:true">	
    		<div data-options="region:'center',title:'仓鼠'" style="width:100%;height:100px;">
    			<div style="width:100%;height:100%;">
	    		<div style="position:absolute;width:100%;height:10%;left:0px;top:10%;background:#000;filter:alpha(opacity=0);opacity:0"></div>
				<object type="application/x-shockwave-flash" style="outline:none;" data="swf/hamster.swf" width="100%" height="100%"><param name="AllowScriptAccess" value="never"></param><param name="wmode" value="opaque"></param></object>
	    		</div>
    		</div>
    		
    		<div data-options="region:'north',title:'今日'" style="width:100%;height:200px;">
    			<div id="cc" class="easyui-calendar" data-options="fit:true"></div>
    		</div> 
    	</div>
    </div>
    
    <div class="mainman" data-options="region:'center',title:'客服'" style="background:#eee;border:none;">
    	<div id="center_tabs" class="easyui-tabs" data-options="fit:'true'">
			<div title="对话框" style="padding:10px;overflow-x:hidden" data-options="iconCls:'icon-help'">
				<div class="easyui-accordion" style="width:100%;height:70px;overflow-y:scroll">
						<div title="查询用户" data-options="iconCls:'icon-search',collapsed:false,collapsible:false" style="padding:5px;">
							<input class="easyui-searchbox" prompt="请输入用户名称" style="width:90%;height:25px;">
						</div>
				</div>		
				<div id="customerDiv" class="easyui-accordion" style="width:100%;height:280px;overflow-y:scroll">
				</div>
				<div data-options="collapsed:false,collapsible:false" style="padding:20px;height:40px;">
					<input id="customerServiceInput" prompt="请输入回复内容..." style="width:80%;height:50px;text-indent:10px;font-size:20px">
					<input type="button" value="发送" style="width:10%;height:50px;margin-left:5%" onclick="sendChatInfo()">
				</div>
			</div>
		</div>
    </div>
</div>

<div id="infomessage" style="position:absolute;bottom:0px; right:50px;display:none;">
    <div id="p" class="easyui-panel" title="提示信息" 
            style="width:200px;height:150px;padding:10px;background:#fafafa;"
            data-options="iconCls:'icon-undo',modal:true">
          <br/>
        <p>显示提示信息</p>
    </div>
</div>

</body>
<script>
	function selectCustomer(){
		alert("!")
	}

	function selectPanel(){//选择用户
		$.messager.prompt('Prompt','Please enter the panel title:',function(s){
			if (s){
				$('#aa').accordion('select',s);
			}
		});
	}
	var idx = 1;
	function addPanel(){//添加面板
		$('#aa').accordion('add',{
			title:'Title'+idx,
			content:'<div style="padding:10px">Content'+idx+'</div>'
		});
		idx++;
	}
	function removePanel(){//删除面板
		var pp = $('#aa').accordion('getSelected');
		if (pp){
			var index = $('#aa').accordion('getPanelIndex',pp);
			$('#aa').accordion('remove',index);
		}
	}
	function sendMessage(){
		alert( $("#customerDiv div").attr("data-options") );
		
	}
</script>
</html>
